<template>
  <view class="textview-page">
    <view class="textview-header">
      <text class="file-title">{{ title }}</text>
    </view>
    
    <scroll-view scroll-y class="textview-content">
      <text class="text-content">{{ content }}</text>
    </scroll-view>
    
    <view class="textview-actions">
      <button class="action-btn" @click="copyText">复制文本</button>
      <button class="action-btn primary" @click="downloadFile">下载文件</button>
    </view>
    
    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TextView',
  data() {
    return {
      url: '',
      title: '',
      content: '',
      loading: false
    }
  },
  onLoad(options) {
    console.log('TextView页面参数:', options);
    this.url = decodeURIComponent(options.url || '');
    this.title = decodeURIComponent(options.title || '文本文件');
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: this.title
    });
    
    this.loadTextContent();
  },
  methods: {
    async loadTextContent() {
      if (!this.url) {
        uni.showToast({
          title: '文件链接不存在',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      try {
        console.log('加载文本内容:', this.url);
        const response = await uni.request({
          url: this.url,
          method: 'GET'
        });
        
        if (response.statusCode === 200) {
          this.content = response.data;
          console.log('文本内容加载成功');
        } else {
          throw new Error('加载失败');
        }
      } catch (error) {
        console.error('加载文本内容失败:', error);
        uni.showToast({
          title: '文本加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    copyText() {
      if (!this.content) {
        uni.showToast({
          title: '没有可复制的内容',
          icon: 'none'
        });
        return;
      }
      
      uni.setClipboardData({
        data: this.content,
        success: () => {
          uni.showToast({
            title: '文本已复制',
            icon: 'success'
          });
        }
      });
    },
    
    downloadFile() {
      if (!this.url) {
        uni.showToast({
          title: '文件链接不存在',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '下载文件',
        content: '确定要下载此文件吗？',
        success: (res) => {
          if (res.confirm) {
            this.startDownload();
          }
        }
      });
    },
    
    startDownload() {
      uni.showLoading({
        title: '正在下载...'
      });
      
      uni.downloadFile({
        url: this.url,
        success: (res) => {
          uni.hideLoading();
          if (res.statusCode === 200) {
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: (saveRes) => {
                uni.showToast({
                  title: '下载成功',
                  icon: 'success'
                });
              },
              fail: (err) => {
                console.error('保存文件失败:', err);
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            });
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.error('下载失败:', err);
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.textview-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}

.textview-header {
  padding: 20rpx 32rpx;
  border-bottom: 1rpx solid #F0F0F0;
  background-color: #FFFFFF;
}

.file-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

.textview-content {
  flex: 1;
  padding: 32rpx;
}

.text-content {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

.textview-actions {
  padding: 20rpx 32rpx;
  border-top: 1rpx solid #F0F0F0;
  background-color: #FFFFFF;
  display: flex;
  gap: 16rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #F8F8F8;
  border: 1rpx solid #E0E0E0;
  color: #666666;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn.primary {
  background-color: #FF8800;
  color: #FFFFFF;
  border-color: #FF8800;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-text {
  color: #FFFFFF;
  font-size: 28rpx;
}
</style>
